<template id='todoForm'>
    <div class="input-group mb-3">
        <input 
        type="text" 
        class="form-control" 
        placeholder="Please Enter the event you are going to do" 
        v-model='todoEvent' 
        ref='inputValue' 
        @keyup.13='add'>
        <div class="input-group-append">
            <todoButton 
            class="btn btn-outline-secondary" id="button-addon2" 
            v-on:click.native="add">Submit</todoButton>
        </div>
    </div>
</template>

<script>
import todoButton from './todoButton.vue'

export default {
    data(){
        return {
            todoEvent:''
        }
    },
    methods: {
        add(){
            this.$emit('add',this.todoEvent)
            this.todoEvent = '';
            this.$refs.inputValue.focus();
        }
    },
    components:{
        todoButton
    }
}
</script>

<style>

</style>